<template>
  <div class="container">
    <scroller ref="loadMore" class="institution-list" :on-refresh="loadTop" :on-infinite="loadBottom">
      <swiper :options="swiperOption" ref="swiper">
        <swiper-slide v-for="(slide, index) in swiperSlides " :key="index">
          <div>
            <img v-lazy="slide.picture" class="lazy-img-fadein" lazy-progressive="true">
          </div>
          <!-- <a v-else :href="slide.linkUrl">
            <img v-lazy="slide.picture" class="lazy-img-fadein" lazy-progressive="true">
          </a> -->
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <div class="category">
        <div class="category-list flex-between">
          <v-touch tag="div" class="category-item" @tap="toFitInstiList(1)">
            <icon class="icon-guidance" name="guidance" scale="5"></icon>
            <p>升学辅导</p>
          </v-touch>
          <v-touch tag="div" class="category-item" @tap="toFitInstiList(2)">
            <icon class="icon-languagestudy" name="languagestudy" scale="5"></icon>
            <p>外语培训</p>
          </v-touch>
          <v-touch tag="div" class="category-item" @tap="toFitInstiList(3)">
            <icon class="icon-artstudy" name="artstudy" scale="5"></icon>
            <p>才艺兴趣</p>
          </v-touch>
          <v-touch tag="div" class="category-item" @tap="toFitInstiList(4)">
            <icon class="icon-travel" name="travel" scale="5"></icon>
            <p>亲子游乐</p>
          </v-touch>
        </div>
        <div class="category-list flex-between">
          <v-touch tag="div" class="category-item" @tap="toFitInstiList(5)">
            <icon class="icon-deposit" name="deposit" scale="5"></icon>
            <p>早教托班</p>
          </v-touch>
          <v-touch tag="div" class="category-item" @tap="toFitInstiList(6)">
            <icon class="icon-activityshow" name="activityshow" scale="5"></icon>
            <p>活动演出</p>
          </v-touch>
          <v-touch tag="div" class="category-item" @tap="toFitInstiList(7)">
            <icon class="icon-otherscategory" name="otherscategory" scale="5"></icon>
            <p>其他机构</p>
          </v-touch>
          <v-touch tag="div" class="category-item" @tap="toFitInstiList(8)">
            <icon class="icon-allcategory" name="allcategory" scale="5"></icon>
            <p>全部机构</p>
          </v-touch>
        </div>
      </div>
      <div class="line">
        <span>附近值得去</span>
      </div>
      <div class="pro-list">
        <v-touch
          tag="div"
          class="pro-item flex-align-stretch"
          @tap="toInstiDetail(instiItem.keyId)"
          v-for="(instiItem, index) in institutionList"
          :key="index"
        >
          <div class="pro-img">
            <img class="lazy-img-fadein" v-lazy="instiItem.firstPicture" lazy-progressive="true">
          </div>
          <div class="pro-props">
            <div class="pro-name flex-between">{{ instiItem.name }}</div>
            <!-- <div class="pro-score flex-between">评分
                    <span>&nbsp;&nbsp;</span>
                  </div> -->
            <div class="pro-address">
              <span class="address">{{ instiItem.address }}</span>
              <span class="distance">{{ instiItem.distance }}km</span>
            </div>
            <div class="pro-number flex-between" v-if="instiItem.experienceState === 1">
              <span>已预约人数:
                <span class="number">{{ instiItem.appointmentNumber }}</span>人</span>
              <span>
                <icon class="icon-order" name="order" scale="1.5"></icon>免费预约体验
              </span>
            </div>
            <div class="pro-type">
              <span>{{ instiItem.categoryName }}&nbsp;&nbsp;</span>
              <span v-if="instiItem.suitAge">|&nbsp;&nbsp;{{ instiItem.suitAge }}</span>
            </div>
          </div>
        </v-touch>
      </div>
    </scroller>
    <navigation></navigation>
  </div>
</template>

<script>
// // 接口接入
// import { getInstitutionList, getBannerList } from "@/api/index";

export default {
  name: "home",
  data() {
    return {
      page: 1,
      pageTotal: 1000,
      pageSize: 4,
      suitAge: "",
      classified: 8,
      coordinate: "",
      locationDisable: false,
      searchDisable: false,
      swiperOption: {
        autoplay: {
          delay: 3000
        },
        setWrapperSize: true,
        pagination: ".swiper-pagination",
        paginationClickable: true,
        mousewheelControl: true,
        observeParents: true
      },
      swiperSlides: [
        {
          date: "2017-11-04",
          sequence: 1,
          bannerType: 1,
          linkUrl: "http://",
          keyId: 19,
          article: {
            keyId: 1,
            createTime: 1502812800000,
            title: "邻聚学介绍",
            content:
              '<p><b><strong>什么是“邻聚学</strong></b><b><strong>”？</strong></b></p><p>&nbsp; &nbsp; &nbsp; “邻聚学_社区E亲子教育”平台，是一个致力于整合教育资源，发扬教育公平性，提升教育效率的“互联网+教育”平台。</p><p>&nbsp; &nbsp; &nbsp; “邻聚学”平台，集中了社区周边的：升学辅导、外语培训、才艺兴趣、亲子游乐、早教晚托、活动演出等众多品类教育机构。</p><p><strong>提供四大服务：</strong></p><p>&nbsp; &nbsp; &nbsp; &nbsp;一、即时预约免费体验：直观展示周边教育机构可预约体验时段，一键在线免费预约；</p><p>&nbsp; &nbsp; &nbsp; &nbsp;二、购课：周边机构海量课程底价直达，一站式购买；</p><p>&nbsp; &nbsp; &nbsp; &nbsp;三、机构客观性描述：周边教育机构多维度了解，确保信息真实可信；</p><p>&nbsp; &nbsp; &nbsp; &nbsp;四、用户客观评价机构和老师：发现身边的好老师，让优质教育零距离。</p><p>“邻聚学”平台，利用互联网的优势，将周边教育机构的优质教育资源，直观地呈现在家长和学生的面前。</p><p><img src="http://ou3x12oo4.bkt.clouddn.com/FqFZ6EXlVl1H6bjbpkvZS_ceBzl9" class="wscnph" data-wscntype="image" data-wscnh="324" data-wscnw="981" data-mce-src="http://ou3x12oo4.bkt.clouddn.com/FqFZ6EXlVl1H6bjbpkvZS_ceBzl9"></p><h2><br></h2>',
            tenantId: "f1e116e7c56d48d7ae74746d1aa31231"
          },
          picture: require("./xunhuan1.jpg"),
        },
        {
          picture: require("./xunhuan2.jpg"),
        },
        {
          picture: require("./xunhuan3.jpg"),
        },
        {
          picture: require("./xunhuan4.jpg"),
        },
        {
          picture: require("./xunhuan5.jpg"),
        },
        {
          picture: require("./xunhuan6.jpg"),
        },
        {
          picture: require("./xunhuan7.jpg"),
        },
        {
          picture: require("./xunhuan8.jpg"),
        },
        /*
        {
          date: "2018-01-11",
          sequence: 2,
          bannerType: 1,
          linkUrl:
            "http://www.linjuxue.com/#/CourseDetail?instiId=125&courseId=260",
          keyId: 50,
          article: null,
          picture:
            "http://ou3x12oo4.bkt.clouddn.com/Fop7k69dC-sdfMuKm6xEeyfZmrQx"
        },
        {
          date: "2017-12-08",
          sequence: 3,
          bannerType: 1,
          linkUrl: "http://",
          keyId: 45,
          article: {
            keyId: 1,
            createTime: 1502812800000,
            title: "邻聚学介绍",
            content:
              '<p><b><strong>什么是“邻聚学</strong></b><b><strong>”？</strong></b></p><p>&nbsp; &nbsp; &nbsp; “邻聚学_社区E亲子教育”平台，是一个致力于整合教育资源，发扬教育公平性，提升教育效率的“互联网+教育”平台。</p><p>&nbsp; &nbsp; &nbsp; “邻聚学”平台，集中了社区周边的：升学辅导、外语培训、才艺兴趣、亲子游乐、早教晚托、活动演出等众多品类教育机构。</p><p><strong>提供四大服务：</strong></p><p>&nbsp; &nbsp; &nbsp; &nbsp;一、即时预约免费体验：直观展示周边教育机构可预约体验时段，一键在线免费预约；</p><p>&nbsp; &nbsp; &nbsp; &nbsp;二、购课：周边机构海量课程底价直达，一站式购买；</p><p>&nbsp; &nbsp; &nbsp; &nbsp;三、机构客观性描述：周边教育机构多维度了解，确保信息真实可信；</p><p>&nbsp; &nbsp; &nbsp; &nbsp;四、用户客观评价机构和老师：发现身边的好老师，让优质教育零距离。</p><p>“邻聚学”平台，利用互联网的优势，将周边教育机构的优质教育资源，直观地呈现在家长和学生的面前。</p><p><img src="http://ou3x12oo4.bkt.clouddn.com/FqFZ6EXlVl1H6bjbpkvZS_ceBzl9" class="wscnph" data-wscntype="image" data-wscnh="324" data-wscnw="981" data-mce-src="http://ou3x12oo4.bkt.clouddn.com/FqFZ6EXlVl1H6bjbpkvZS_ceBzl9"></p><h2><br></h2>',
            tenantId: "f1e116e7c56d48d7ae74746d1aa31231"
          },
          picture:
            "http://ou3x12oo4.bkt.clouddn.com/Fvp_NzVJ2_0WQq8oeMCThELtnycA"
        },
        {
          date: "2017-12-08",
          sequence: 3,
          bannerType: 1,
          linkUrl: "http://www.linjuxue.com/#/InstiDetail?instiId=44",
          keyId: 46,
          article: null,
          picture:
            "http://ou3x12oo4.bkt.clouddn.com/FhmsRmPcGxsqwDkKHMTScQ9dOw5J"
        }
              */
      ],
      institutionList: [
        {
          suitAge: "",
          address: "漕溪北路468号宏汇大厦202室",
          distance: null,
          experienceState: 1,
          dealNumber: 236,
          firstPicture:
            "http://ou3x12oo4.bkt.clouddn.com/FisMqhCM5SFuyg7J6_KxBAoOkOWK",
          name: "美思欧童乐Minimaestros",
          keyId: 25,
          appointmentNumber: 304,
          state: 1,
          viewNumber: 929,
          categoryName: "才艺兴趣"
        },
        {
          suitAge: "",
          address: "东安路562号绿地缤纷城西区3层",
          distance: null,
          experienceState: 1,
          dealNumber: 225,
          firstPicture:
            "http://ou3x12oo4.bkt.clouddn.com/FuZLDfxN-iNOaUwr5zzTZ37BrIh4",
          name: "彩虹鸟日式早教中心(绿地缤纷城店)",
          keyId: 26,
          appointmentNumber: 310,
          state: 1,
          viewNumber: 880,
          categoryName: "早教托班"
        },
        {
          suitAge: "",
          address: "徐家汇路618号日月光中心广场",
          distance: null,
          experienceState: 1,
          dealNumber: 357,
          firstPicture:
            "http://ou3x12oo4.bkt.clouddn.com/Fv7-nT-awsnJlbB4HnFr-SULbIAd",
          name: "美吉姆国际儿童教育中心(日月光中心)",
          keyId: 28,
          appointmentNumber: 521,
          state: 1,
          viewNumber: 1493,
          categoryName: "才艺兴趣"
        },
        {
          suitAge: "",
          address: "沪南公路2419弄31号",
          distance: null,
          experienceState: 1,
          dealNumber: 21,
          firstPicture:
            "http://ou3x12oo4.bkt.clouddn.com/FgBdmGzYLvGEBqM8OnbBK3jRkDYf",
          name: "思则优教学活动中心",
          keyId: 30,
          appointmentNumber: 37,
          state: 1,
          viewNumber: 58,
          categoryName: "升学辅导"
        }
      ],
      refreshLoading: false,
      bannerType: 1,
      street: ""
    };
  },
  methods: {
    // 下拉刷新
    loadTop(done) {
      done(true);
    },
    // 加载更多
    loadBottom(done) {
      console.log("加载更多");
      done(true)
    },
    // 进入机构详情页
    toInstiDetail(id) {
      // recordViewNumber(id);
      this.$router.push({
        name: "InstiDetail",
        query: { instiId: id }
      });
    },
    // 点击机构分类进入对应机构列表页
    toFitInstiList(index) {
      this.$router.push({ name: "InstiList", query: { instiTypeId: index } });
    }
  },
  created() {
    console.log('页面加载钩子')
  }
};
</script>

<style scoped>

</style>
